<!--  -->
<template>
  <div class="fixed-qq">
    <template v-if="itemList && itemList.length > 0">
      <div v-for="(item, index) in itemList" :key="index" class="item">
        <el-form ref="formValidate" :model="item" :inline="true" :rules="rules">
          <el-form-item label="名称：" prop="name">
            <el-input placeholder="输入显示名称" size="mini" style="width: 110px;" maxlength="24" v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item label="QQ号：" prop="value">
            <el-input placeholder="输入QQ号码" size="mini" style="width: 180px;" maxlength="64" v-model.trim="item.value">
        </el-input>
          </el-form-item>
          <el-form-item>
            <span class="item-opt">
              <el-button v-if="(index + 1) === itemList.length && itemList.length <= 12" @click="addData" type="primary"
                size="mini" icon="el-icon-circle-plus-outline">
              </el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" @click="delData(index)"></el-button>
            </span>
          </el-form-item>
        </el-form>
        <!-- 名称：
        <el-input placeholder="输入显示名称" size="mini" style="width: 110px;" maxlength="24" v-model="item.name"></el-input>
        &nbsp;&nbsp;QQ号：
        <el-input placeholder="输入对话QQ号码" size="mini" style="width: 180px;" maxlength="64" v-model="item.value">
        </el-input>
        <span class="item-opt">
          <el-button v-if="(index + 1) === itemList.length && itemList.length <= 12" @click="addData" type="primary"
            size="mini" icon="el-icon-circle-plus-outline">
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="delData(index)"></el-button>
        </span> -->
      </div>
    </template>
    <div style="text-align: center;" v-else>
      <span style="color: #868686;">没有数据点击<el-button @click="add" type="text">添加</el-button>，创建数据！</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    itemList: {
      type: Array
    },
    add: {
      type: Function
    },
    del: {
      type: Function
    }
  },
  data () {
    var checkQQ = (rule, value, callback) => {
      let qqReg = RegExp(/^[1-9][0-9]{4,11}$/)
      if (qqReg.test(value) || value === '') {
        return callback()
      } else {
        callback(new Error('请输入正确的QQ号码'))
      }
    }
    return {
      rules: {
        name: [
          { required: true, message: '请输入显示名称', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '请输入QQ号码', trigger: 'blur' },
          { validator: checkQQ, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    addData () {
      this.add()
    },
    delData (index) {
      this.del(index)
    },
    validateF () {
      let bool = true
      if (this.$refs['formValidate']) {
        this.$refs['formValidate'].map(item => {
          item.validate((valid) => {
            if (!valid) {
              bool = false
            }
          })
        })
      }
      return bool
    }
  }
}

</script>

<style scoped lang="scss">
.fixed-qq {
  padding-left: 24px;
  font-size: 12px;
  /deep/ .el-form-item{
    margin-bottom: 0;
    .el-form-item__error{
      padding-top: 0;
    }
  }
  .item {
    margin-bottom: 8px;

    .item-opt {
      float: right;
    }
  }
}
</style>
